<template>
  <div class="demo">
    <div class="p">{{ name }}</div>
    <button @click="onClick">点我</button>

    <!-- 
      npm install swiper
     -->
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="item in list" :key="item.id">
          <img :src="item.imageUrl" alt="" />
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Swiper, { Pagination } from "swiper";
import "swiper/css";
import "swiper/css/pagination";

export default {
  name: "demo",

  data() {
    return {
      list: [],
      name: "zhangsn",
    };
  },

  mounted() {
    /**
     * 问题：getBanner 是发网络请求，请求到数据之后再去渲染页面, 由于是异步代码，new Swiper 会在数据回来之前，先初始化了。导致
     * 轮播图失效。
     * 解决办法：
     *    数据请求完成，且 DOM 更新之后，再 初始化 swiper
     *
     *    使用 nextTick
     *    数据发生变化，但是页面不会立即更新，vue内部会做一些处理。
     */
    this.getBanner();

    console.log("2");
  },

  methods: {
    getBanner() {
      axios.get("http://119.91.129.10:3000/banners").then(({ data }) => {
        console.log(1);

        console.log(document.querySelector(".swiper-wrapper").innerHTML, "--1");
        this.list = data.data;
        this.$nextTick(() => {
          console.log(
            document.querySelector(".swiper-wrapper").innerHTML,
            "--2"
          );

          // 等数据完成之后，且 真实DOM 更新完成再来初始化
          new Swiper(".swiper", {
            modules: [Pagination],

            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
              el: ".swiper-pagination",
            },
          });
        });
      });
    },

    onClick() {
      console.log(document.querySelector(".p").innerHTML); // zhangsan
      this.name = "李四";
      console.log(1);
      this.age = 18;
      this.sex = "女";
      // 数据的变化，页面是不是就要更新（虚拟DOM要比对，要重新替换真实DOM）
      // 观察：数据一发生变化，咱们的真实DOM就更新了嘛？ 没有立即更新的。。。。
      // nextTick 等这次DOM更新完成之后，会帮我们执行写在 nextTick 的回调函数
      // this.$nextTick(callback)
      // Vue.nextTick(callback)
      console.log(document.querySelector(".p").innerHTML); // zhangsan

      this.$nextTick(() => {
        console.log("===nextTick");
        console.log(document.querySelector(".p").innerHTML); // 李四
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
